// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
// 最新的vue-loader中，VueLoaderPlugin插件的位置有所改变
const {VueLoaderPlugin} = require('vue-loader/dist/index')

module.exports = {
  mode: 'development', // 环境模式
  entry: path.resolve(__dirname, './src/main.js'), // 打包入口
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包出口
    filename: 'js/[name].js' // 打包完的静态资源文件名
  },
  module:{
    rules: [
        {
            test: /\.vue$/,
            use:[
                'vue-loader'
            ]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.js$/,
            exclude: /node_modules/, // 不编译node_module下的文件
            loader: 'babel-loader'
        }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './index.html'), // 我们需要使用的html模板地址
        filename:'index.html', // 打包后输出的文件名
        title: '手搭vue环境' // index.html 模板内，通过<% =htmlWebpackPlugin.options.title %>拿到的变量
    }),
    // 添加VueLoaderPlugin插件
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 8080,
    publicPath: '/'
  }
}